.row {
    display: flex;
    flex-direction: row;
}

.col {
    display: flex;
    flex-direction: column;
}

@for $i from 0 through 10 {
    .flex#{$i} {
        flex: $i;
    }
}

@mixin my-flex-justify-start {
    justify-content: flex-start;
}

@mixin my-flex-justify-center {
    justify-content: center;
}

@mixin my-flex-justify-end {
    justify-content: flex-end;
}

@mixin my-flex-align-start {
    align-items: flex-start;
}

@mixin my-flex-align-center {
    align-items: center;
}

@mixin my-flex-align-end {
    align-items: flex-end;
}

.star-start,
.ss {
    @include my-flex-justify-start;
    @include my-flex-align-start;
}

.start-center,
.sc {
    @include my-flex-justify-start;
    @include my-flex-align-center;
}

.start-end,
.se {
    @include my-flex-justify-start;
    @include my-flex-align-end;
}

.center-start,
.cs {
    @include my-flex-justify-center;
    @include my-flex-align-start;
}

.center-center,
.cc {
    @include my-flex-justify-center;
    @include my-flex-align-center;
}

.center-end,
.ce {
    @include my-flex-justify-center;
    @include my-flex-align-end;
}

.end-start,
.es {
    @include my-flex-justify-end;
    @include my-flex-align-start;
}

.end-center,
.ec {
    @include my-flex-justify-end;
    @include my-flex-align-center;
}

.end-end,
.ee {
    @include my-flex-justify-end;
    @include my-flex-align-end;
}

// 元素的margin相等
.space-around-start,
.sas {
    justify-content: space-around;
    @include my-flex-align-start;
}

.space-around-center,
.sac {
    justify-content: space-around;
    @include my-flex-align-center;
}

.space-around-end,
.sae {
    justify-content: space-around;
    @include my-flex-align-end;
}

// 元素间距等距
.space-between-start,
.sbs {
    justify-content: space-between;
    @include my-flex-align-start;
}

.space-between-center,
.sbc {
    justify-content: space-between;
    @include my-flex-align-center;
}

.space-between-end,
.sbe {
    justify-content: space-between;
    @include my-flex-align-end;
}

// 元素 + 两边等距
.space-between-start,
.ses {
    justify-content: space-evenly;
    @include my-flex-align-start;
}

.space-between-center,
.sec {
    justify-content: space-evenly;
    @include my-flex-align-center;
}

.space-between-end,
.see {
    justify-content: space-evenly;
    @include my-flex-align-end;
}

.wrap {
    flex-wrap: wrap;
}